<template>
  <div class="h-full bg-grey">
    <van-nav-bar title="会员订单" left-arrow @click-left="$router.push('/user')" />
    <!-- 订单列表 -->
    <van-tabs @change="handleChangeTab" swipeable>
      <van-tab v-for="title in tabTitle" :title="title" :key="title">
        <van-skeleton :row="5" :loading="!ready" class="m-t-20">
          <van-list
            v-model="listControl.loading"
            :finished="listControl.pages === 0 || listPage.current === listControl.pages"
            finished-text="没有更多了"
            @load="getMoreData()"
            :immediate-check="false"
          >
            <order-list :list="list"></order-list>
          </van-list>
        </van-skeleton>
        <empty-data class="text-center m-t-20" v-if="!list.length && ready" content="暂无数据"></empty-data>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import OrderList from '@/views/Order/components/OrderList'
export default {
  data () {
    return {
      ready: false,
      tabTitle: ['全部', '未评价', '已评价'],
      status: [1, 2, 3],
      list: [],
      listPage: {
        size: 10,
        current: 1
      },
      listControl: {
        pages: null,
        loading: false
      }
    }
  },
  components: {
    OrderList
  },
  mounted () {
    this.getList()
  },
  methods: {
    async getList () {
      this.listControl.loading = true
      let { page } = await this.$api.post('/xf/business/query', {
        size: 10,
        current: this.listPage.current,
        status: this.status
      })
      if (status === 401) return
      this.list = [...this.list, ...page.records]
      this.listPage.current = page.current
      this.listControl.pages = page.pages
      this.listControl.loading = false
      this.ready = true
    },
    getMoreData () {
      // 分页查询附近商家
      this.listPage.current++
      this.getList()
    },
    async handleChangeTab (name, title) {
      this.list = []
      this.listPage = {
        size: 10,
        current: 1
      }
      this.listControl = {
        pages: null,
        loading: false
      }
      this.ready = false
      // 查询的订单状态，默认1,2,3,4 可选
      // 1  已下单  2交易完成  3已评价  4已取消
      switch (title) {
        case '全部':
          this.status = [1, 2, 3]
          break
        case '未评价':
          this.status = [1, 2]
          break
        case '已评价':
          this.status = [3]
          break
      }
      await this.getList()
      this.ready = true
    }
  }
}
</script>
